<template>
  <view class="selector-container">
    <view
        v-for="(item, index) in options"
        :key="index"
        class="selector-item"
        :style="{
        width: itemWidth,
        borderColor: selectedValue === item.value ? activeColor : defaultColor,
        backgroundColor: selectedValue === item.value ? item.activeBackgroundColor || activeBackgroundColor : item.backgroundColor || defaultBackgroundColor
      }"
        @click="handleSelect(item.value)"
    >
      <view class="item-content">
        <!-- 左侧图标插槽 -->
        <slot v-if="index === 0" name="left-icon"></slot>
        <!-- 右侧图标插槽 -->
        <slot v-if="index === 1" name="right-icon"></slot>
        <text   :style="{
        fontSize: '25rpx',
        marginTop: '10rpx',
        color: selectedValue === item.value ? activeColor : '#606266'
      }"
        >{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BiSelector',
  props: {
    value: {
      type: [String, Number],
      default: null
    },
    options: {
      type: Array,
      default: () => [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2 }
      ]
    },
    activeColor: {
      type: String,
      default: '#606266'
    },
    defaultColor: {
      type: String,
      default: '#DCDFE6'
    },
    // 默认选中状态背景色
    activeBackgroundColor: {
      type: String,
      default: '#ffffff'
    },
    // 默认未选中状态背景色
    defaultBackgroundColor: {
      type: String,
      default: '#ffffff'
    }
  },
  computed: {
    itemWidth() {
      return `${100 / this.options.length}%`
    }
  },
  watch: {
    value(newVal) {
      this.selectedValue = newVal
    }
  },
  data() {
    return {
      selectedValue:  this.value
    }
  },
  methods: {
    handleSelect(value) {
      this.selectedValue = value
      this.$emit('input', value) // 触发 input 事件以支持 v-model
      this.$emit('change', value) // 保留原有的 change 事件
    }
  }
}
</script>

<style lang="less" scoped>
.selector-container {
  display: flex;
  padding: 10rpx;
  background: #fff;

  .selector-item {
    flex: 1;
    height: 65rpx;
    border: 2rpx solid;
    border-radius: 10rpx;
    margin: 0 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    .item-content {
      border: 0rpx solid;
      height: 60rpx;
      line-height: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .item-text {
        font-size: 20rpx;
        margin-top: 5rpx;
      }
    }

    &:active {
      opacity: 0.9;
    }
  }
}
</style>
